<template>
  <div class="comp-item-container">
    <a-form-item
      :disabled="attrs.viewMode === BaseDataUtils.viewMode.VIEW"
      label="下拉菜单标题"
      field="name"
      required
      label-col-flex="0px"
      class="comp-item-content select-item"
      :validate-trigger="['']"
    >
      <a-input
        placeholder="请输入"
        v-model.trim="attrs.modelForm.name"
        @input="(value, ev) => attrs.handleChange(value, attrs.modelForm.id)"
      />
    </a-form-item>
    <a-form-item
      label="下拉选项"
      field="data"
      required
      label-col-flex="0px"
      :content-flex="false"
      :label-col-style="{ marginBottom: '16px' }"
      class="child-box"
    >
      <div
        class="select-option-item child-item select-option"
        v-for="(item, index) in attrs.modelForm.data"
        :key="index"
      >
        <div class="option-item-form multiple-item-form">
          <a-form-item
            :disabled="attrs.viewMode === BaseDataUtils.viewMode.VIEW"
            class="option-item multiple-item"
            content-class="multiple-item-form"
            :label="`选项${index + 1}`"
            :field="`data.${index}.text`"
            :label-col-style="{ marginRight: '12px' }"
            hide-asterisk
            :validate-trigger="['']"
            :rules="[
              {
                required: true,
                message: `选项${index + 1}名称不能为空`,
              },
            ]"
          >
            <a-input
              placeholder="请输入选项名称"
              v-model.trim="item.text"
              :style="{ width: '272px', height: '32px' }"
              @input="(value, ev) => attrs.handleChildChange(value, index, 'text')"
            ></a-input>
          </a-form-item>
          <a-form-item
            disabled
            class="option-item multiple-item"
            label="编码"
            :field="`data[${index}].code`"
            content-class="multiple-item-form"
            :label-col-style="{ marginRight: '12px' }"
            hide-asterisk
          >
            <a-input
              v-model.trim="item.code"
              placeholder="请输入"
              :style="{ width: '272px', height: '32px' }"
              @input="(value, ev) => attrs.handleChildChange(value, index, 'code')"
            ></a-input>
          </a-form-item>
          <a-form-item
            class="option-item multiple-item"
            label=""
            :field="`data[${index}].value`"
            content-class="multiple-item-form"
            label-col-flex="0px"
          >
            <a-checkbox
              v-model="item.value"
              @change="(value) => handleChange(item, value)"
              >设为默认选项</a-checkbox
            >
          </a-form-item>
        </div>
        <div
          class="option-icon action-item"
          v-show="attrs.viewMode !== BaseDataUtils.viewMode.VIEW"
        >
          <i
            class="iconfont icon-tianjia"
            v-if="index === 0 || index === attrs.modelForm.data.length - 1"
            @click.stop="() => props.handleCompAdd(index + 1)"
          ></i>
          <i
            class="iconfont icon-shanchu1"
            v-if="attrs.modelForm.data.length > 1 && index !== 0"
            @click.stop="() => props.handleCompDel(index)"
          ></i>
        </div>
      </div>
    </a-form-item>
  </div>
</template>
<script lang="ts" setup name="Select">
// @ts-nocheck
import { useAttrs } from "vue";
import * as BaseDataUtils from "../utils/useBaseData";

interface Prop {
  handleCompAdd: Function;
  handleCompDel: Function;
}
const attrs = useAttrs() as {
  modelForm: any;
  viewMode: string;
  handleChange: Function;
  handleChildChange: Function;
};
const props = defineProps<Prop>();
const handleChange = (
  it: { value: boolean },
  value: boolean | (string | number | boolean)[]
) => {
  if (typeof value === "boolean") {//value代表是否默认值
    attrs.modelForm.data.map((item: { value: boolean }) => (item.value = false));
    it.value = value;
  }
};
</script>
<style lang="less" scoped>
@import url("../styles/typeModal.less");
@import url("../styles/compModal.less");
</style>
